<template>
    <!-- 注册页面 -->
    <div class="container">
        <div class="box">
            <form autocomplete="off">
                <h2>Create your account</h2>
                <div class="inputBox">
                    <input type="text" v-model="user.name" required>
                    <span>UserName</span>
                    <i></i>
                </div>
                <div class="inputBox">
                    <input type="password" v-model="user.password" required>
                    <span>Password</span>
                    <i></i>
                </div>
                <div class="links">
                    <a href="#"></a>
                    <a href="/login">Login</a>
                </div>
                <input type="button" @click="registerUser" value="Submit" />
            </form>
        </div>
    </div>

</template>

<script lang="ts">
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { Ruser } from '@/type/register'
import { Register } from '@/api/loginregister/register'
import { ElMessage } from 'element-plus'
export default {
  setup () {
    const Data = reactive(new Ruser())
    const router = useRouter()
    const registerUser = async () => {
      if (Data.user.name === '' || Data.user.password === '') {
        return ElMessage.warning('请按要求填写内容！')
      }
      const { data: res } = await Register(Data.user)
      //   console.log(res)
      if (res.code !== 200) return ElMessage.warning('注册失败！')
      clean()
      ElMessage.success('注册成功')
      router.push('/login')
    }
    // 清空表单
    const clean = () => {
      Data.user = {
        name: '',
        password: ''
      }
    }
    return {
      ...toRefs(Data),
      registerUser

    }
  }
}
</script>

<style scoped>
/* 引入自定义的css样式 */
@import"@/assets/css/login.css"
</style>
